vue 如何创建一个组件

一、如何创建一个组件

1.1 局部组件

以 vue-clic 生成的项目为例，新建 demo.vue 后缀的文件

可以用 vscode 的 插件 vetur 生成 vue 的模板

<template>
</template>
<script>
	export default {
        components:{
        },
        data() {
          return {}
        },
		methods:{
		},
   		computed:{
		}
</script>
<style>
</style>

在该组件中编写完相应的布局，js，样式之后，就可以通过在其它组件中导入该组件进行使用。

<template>
	<demo-component></demo-component>
<template>
<script>
import Demo from './demo.vue'
export default {
    components: {
        // Demo
      	// 下面这种是需要重命名的写法
      	'demo-component':Demo
    }
}
</script>
<style>
</style>

1.2 全局组件

//编写属于自己的公共Vue组件库
//该脚本的作用是，导入所有的公共组件，把它们统一声明成全局组件
//或者是 main.js 中声明，不过这样代码会很多
import Demo1 from './demo1.vue';
import Demo2 from './demo2.vue';

// 对外暴露一个对象，对象里面定义一个 install 方法，该方法会接收 Vue ，然后通过 Vue.component 方法把导入的组件声明成全局的，将来就可以在任何地方使用了
export default {
    install(Vue) {
        Vue.component('app-demo1',Demo1);
        Vue.component('app-demo2',Demo2);
    }
}

二、让一个页面同时出现两个组件

2.1 方法一：

在根组件 App.vue 中直接插入其它组件，建议是页面含有全局组件的情况下可以这种写法。

<template>
	<main>
		<app-header></app-header>
		<router-view></router-view>
		<app-footer></app-footer>
	</main>
</template>

app-header 和 app-footer 建议注册为全局组件。

2.2 方法二：

父子关系组件中父组件引入子组件。

使用本文中局部组件的引入方式即可。

2.3 方法三：

使用 vue-route 的嵌套路由来完成

export default new Router({
  routes: [
    {
      path: '',
      component: Layout,
      redirect: 'home',
      children: [{
        path: 'home',
        component: Home
      }]
    }
  ]
})

在 Layout.vue 中需要放置 <router-view/>

当访问链接中的描点值为 #/home时会生效